<template>
  <div class="contentBottom">
    <el-row :gutter="10">
      <el-col :span="8">
        <div
          :class="[
            isFullScreen ? 'commonHeight' : 'commonHeightBottom',
            'contentBg',
            'monthStyleBox',
          ]"
        >
          <div>
            <p class="fontColor comFontSize TitleStyle">月度数据</p>
          </div>
          <div style="height: 100%">
            <div class="filterMonthData">
              <template>
                <el-radio-group v-model="filterRadio">
                  <el-radio
                    label="addProject"
                    @change="monthData('addProject', '新增项目')"
                    v-if="isEsUser()"
                    >新增项目</el-radio
                  >
                  <el-radio
                    label="addProject"
                    @change="monthData('addProject', '新增建档项目数')"
                    v-else
                    >新增建档项目数</el-radio
                  >
                  <el-radio
                    label="account"
                    @change="monthData('account', '新增专户数')"
                    v-if="isEsUser()"
                    >新增专户数</el-radio
                  >
                  <el-radio
                    label="account"
                    @change="monthData('account', '新增专户开设项目数')"
                    v-else
                    >新增专户开设项目数</el-radio
                  >
                  <el-radio
                    label="fullPay"
                    @change="monthData('fullPay', '当月缴存项目数')"
                    v-if="isEsUser()"
                    >当月缴存项目数</el-radio
                  >
                  <el-radio
                    label="fullPay"
                    @change="monthData('fullPay', '专户缴存项目数')"
                    v-else
                    >专户缴存项目数</el-radio
                  >
                  <el-radio
                    label="salary"
                    @change="monthData('salary', '当月代发项目数')"
                    v-if="isEsUser()"
                    >当月代发项目数</el-radio
                  >
                  <!-- <el-radio label= "salary" @change = "monthData('salary','按月代发项目')" v-else>按月代发项目</el-radio> -->
                </el-radio-group>
              </template>
            </div>

            <div id="monthDataPic" class="monthDataPic"></div>
          </div>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="commonHeightBottom mapBg">
          <div
            class="chartTitle"
            style="
              font-size: 14px;
              color: #6ff4ff;
              border-left: none;
              cursor: pointer;
              font-weight: 400;
            "
          >
            <span
              style="cursor: pointer"
              @click="changeMap(areaArry, index)"
              v-for="(item, index) in areaArry"
              :key="index"
            >
              {{ item.label }}
              <span v-if="index < areaArry.length - 1">></span>
            </span>
          </div>
          <div id="mapContainer" style="padding-top: 16px" class="mapSty"></div>
        </div>
      </el-col>
      <el-col :span="8">
        <div
          :class="[
            isFullScreen ? 'commonHeight' : 'commonHeightBottom',
            'contentBg',
          ]"
        >
          <div class="clearfix">
            <p class="fontColor comFontSize TitleStyle fl">
              地区落实比对
              <span class="titleTip comSinFontSize">（仅统计已开工项目）</span>
            </p>
            <div class="fr realNameBox">
              <el-select
                v-model="realNameSys"
                placeholder="请选择"
                @change="realNameData(realNameSys)"
              >
                <el-option
                  v-for="item in isEsUser() ? esRealNameList : realNameList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </div>
          </div>
          <div style="height: 100%">
            <p class="porjectNum minNum">{{ realNameTitle }}</p>
            <div class="projectDataBox">
              <div
                class="porjectNumData"
                v-for="(item, i) in totalRealName"
                :key="i"
              >
                <span class="sinFontColor minNum cityStyle">{{
                  item.areaName
                }}</span>
                <div class="porjectNumProgress">
                  <el-progress
                    :percentage="item.scale"
                    :color="customColor"
                  ></el-progress>
                </div>
                <span class="projectData minNum">{{ item.total }}</span>
              </div>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: 'overViewBottom',
  data() {
    return {
      filterRadio: 'addProject',
      // percentage: 20,
      customColor: '#6DEFFF',
      totalRealName: [],
      num: 0,
      areaName: this.area,
      investmentType: this.investmentType,
      monthList: [],
      realNameSys: this.isEsUser() ? 'account' : 'attScale',
      esRealNameList: [
        {
          value: 'account',
          label: '专户开设比例',
        },
        {
          value: 'salaryPay',
          label: '代发项目比例',
        },
        {
          value: 'depositIn',
          label: '保证金缴存比例',
        },
      ],
      realNameList: [
        {
          value: 'attScale',
          label: '实名制考勤比例',
        },
        {
          value: 'contractScale',
          label: '实名制合同比例',
        },
        {
          value: 'account',
          label: '专户开设比例',
        },
        // ,{
        // value: "fullPay",
        // label: "专户足额拨付比例"
        // }
        {
          value: 'salaryPay',
          label: '代发项目比例',
        },
        {
          value: 'depositIn',
          label: '保证金缴存比例',
        },
        {
          value: 'depositOut',
          label: '保证金动用比例',
        },
      ],
      Implement: '',
      typeName: '',
      mapAreaArr: {},
      realNameTitle: '工资代发总人次',
      chartMonth: '',
      myMap: '',
      newAreaData: [],
      host: '',
    }
  },
  props: {
    area: {
      type: String,
      default: '湖北省',
    },
    investmentType: {
      type: String,
    },
    isFullScreen: {
      type: String,
      default: '',
    },
  },
  activated() {
    // 解决其他页面浏览器放大缩小，切换到本页面echarts不显示的问题
    if (this.chartMonth || this.myMap) {
      setTimeout(() => {
        this.chartMonth.resize()
        this.myMap.resize()
      }, 100)
    }
  },
  computed: {
    areaArry() {
      return this.$store.state.changeArea
    },
  },
  watch: {
    area(newValue, oldValue) {
      this.area = newValue
      this.areaName = newValue
      this.getHost()
      // 恩施
      this.monthData(this.filterRadio, this.typeName)
      this.getData()
      this.getMap(this.area)
    },
    investmentType(newValue, oldValue) {
      this.investmentType = newValue
      this.getHost()
      this.monthData(this.filterRadio, this.typeName)
      this.getData()
      this.getMap(this.area)
    },
  },
  created() {
    if (this.isShiYanUser()) {
      this.realNameList.splice(0, 1)
      this.realNameSys = 'contractScale'
    }
  },
  mounted() {
    this.getHost()
    let monthTitle
    if (this.isEsUser()) {
      monthTitle = '新增项目'
    } else {
      monthTitle = '新增建档项目数'
    }
    this.monthData(this.filterRadio, monthTitle)
    this.getData()
    this.getMap(this.area)
  },
  methods: {
    changeMap(item, index) {
      if (index == 0) {
        this.$store.commit('SET_INFO', ['changeArea', [item[0]]])
      } else if (index == 1) {
        if (item.length == 3) {
          item.splice(2, 1)
        }
        this.$store.commit('SET_INFO', ['changeArea', item])
      }
    },
    // 获取月度数据
    monthData(type, typeName) {
      this.filterRadio = type
      this.typeName = typeName
      let urlAdr
      if (this.isEsUser()) {
        urlAdr = '/api-p/projectstats/expand/monthstats'
      } else {
        urlAdr = '/api-p/projectstats/expand/databigmonstats'
      }
      this.axios({
        method: 'post',
        url: urlAdr,
        data: {
          areaId: this.areaName,
          investment: this.investmentType,
          type: type,
        },
      })
        .then((resp) => {
          this.getFilterData(typeName, resp.data.result)
        })
        .catch((resp) => {})
    },
    // 获取月度筛选数据
    getFilterData(typeName, data) {
      this.monthList = data.values
      this.getMonthDataPic(typeName, data)
    },
    getMonthDataPic(showTitle, value) {
      var arrDatas = ['4月', '5月', '6月', '7月', '8月', '9月']
      this.$nextTick(() => {
        this.chartMonth = this.$echarts.init(
          document.getElementById('monthDataPic')
        )
        var option = {
          color: ['#53FFAC'],
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              // 坐标轴指示器，坐标轴触发有效
              type: 'shadow', // 默认为直线，可选为：'line' | 'shadow'
            },
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true,
          },
          xAxis: [
            {
              type: 'category',
              data: value ? value.datas : arrDatas,
              axisTick: {
                alignWithLabel: true,
              },
              axisLine: {
                lineStyle: {
                  color: '#fff',
                  width: 0.5,
                },
              },
              nameTextStyle: {
                fontSize: '12',
                color: '#fff',
                fontStyle: 'oblique',
              },
            },
          ],
          yAxis: [
            {
              type: 'value',
              axisLine: {
                show: false,
                lineStyle: {
                  fontSize: 12,
                  color: '#fff',
                },
              },
              splitLine: {
                lineStyle: {
                  color: '#416180',
                  width: 0.5,
                },
              },
              axisTick: {
                show: false,
              },
              name: '单位：个',
              nameLocation: 'end',
              // nameGap: 22,
              nameTextStyle: {
                align: 'center',
                fontSize: 12,
                padding: [0, 0, 0, 5],
              },
            },
          ],
          series: [
            {
              name: showTitle,
              type: 'bar',
              barWidth: '26%',
              data: this.monthList,
            },
          ],
        }
        this.chartMonth.setOption(option)
        // setTimeout(function (){
        window.addEventListener('resize', () => {
          this.chartMonth.resize()
        })
        // },200)
      })
    },
    // 获取地区落实对比数据
    getData() {
      let urlAdr
      if (this.isEsUser()) {
        urlAdr = '/api-p/projectstats/expand/areastatsbytype'
      } else {
        urlAdr = '/api-s/cs/employeestats/base/databigareastats'
      }
      this.axios({
        method: 'post',
        url: urlAdr,
        data: {
          areaId: this.areaName,
          investment: this.investmentType,
          type: this.realNameSys,
        },
      })
        .then((resp) => {
          this.totalRealName = resp.data.result
        })
        .catch((resp) => {})
    },
    realNameData(data) {
      if (data == 'attScale' || data == 'contractScale') {
        this.realNameTitle = '工资代发总人次'
      } else if (data == 'depositOut') {
        this.realNameTitle = '保证金缴存项目数'
      } else {
        this.realNameTitle = '开工项目总数'
      }
      this.realNameSys = data
      this.getData()
      // this.totalRealName = data;
    },
    getMap(type) {
      this.axios({
        method: 'post',
        url: '/api-bs/areadic/base/findlistbyparentid',
        data: {
          parentId: this.$store.state.areaInfoArr.areaId,
        },
      })
        .then((resp) => {
          var areaData = resp.data
          areaData.map((value, index, arry) => {
            if (value.id == '420113') {
              value.areaName = '汉南区'
            }
            this.newAreaData.push({ name: value.areaName, id: value.id })
          })
          this.loadMap(type)
        })
        .catch((resp) => {})
    },
    loadMap(type) {
      var vm = this
      let typeName = ''
      vm.areaArry.forEach((item) => {
        if (item.areaId == type) {
          typeName = item.label
        }
      })
      var optionMap = {
        backgroundColor: '#FFFFFF',
        backgroundColor: 'transparent',
        //配置属性
        series: [
          {
            name: '数据',
            type: 'map',
            map: type == '2' ? 'china' : typeName,
            roam: false,
            zoom: 1.2,
            itemStyle: {
              normal: {
                borderColor: '#26BBFF', //每个区域的边框色
                areaColor: '#31546B', //区域背景色
              },
            },
            label: {
              normal: {
                position: 'center',
                show: true, //省份名称
                textStyle: {
                  color: '#FFF',
                },
              },
              emphasis: {
                show: false,
                textStyle: {
                  color: '#FFF',
                },
              },
            },
            // emphasis: {
            //     itemStyle:{
            //         areaColor:'rgb(29,171,221)',
            //     }
            // },
            data: this.newAreaData, //数据
          },
        ],
      }
      if (this.isWhUser()) {
        optionMap.series[0].label.normal.show = false
        optionMap.tooltip = {
          trigger: 'item',
          formatter: '{b}',
        }
      }
      let url = ''
      if (type.length == 2) {
        url = `js/json/geometryProvince/${type}.json`
      } else if (type.length == 6) {
        url = `js/json/geometryCouties/${type}.json`
      } else if (type.length == 4) {
        url = `js/json/geometryCouties/${type}00.json`
      } else {
        url = `js/json/china.json`
      }
      vm.axios.get(this.host + url).then((res) => {
        if (res) {
          echarts.registerMap(typeName, res.data)
          this.myMap = echarts.init(document.getElementById('mapContainer'))
          this.myMap.off('click')
          this.myMap.setOption(optionMap)
          this.myMap.on('click', function (params) {
            if (params.data) {
              let arr = vm.$store.state.changeArea
              let curenArea = {
                areaId: params.data.id,
                label: params.data.name,
              }
              let flag = true
              arr.forEach((item) => {
                if (item.areaId == params.data.id) {
                  flag = false
                }
              })
              if (flag) {
                if (type.length == 4) {
                  arr.splice(1, 1)
                }
                if (type.length == 2) {
                  arr.splice(1, 2)
                }
                arr.push(curenArea)
              }
              vm.$store.commit('SET_INFO', ['changeArea', arr])
            }
          })
          window.addEventListener('resize', () => {
            vm.myMap.resize()
          })
        } else {
          vm.loadMap(vm.$store.state.areaInfoArr.areaId)
        }
      })
    },

    getRealData(data, value) {
      this.realNameSys = data
      if (this.realNameSys == 'attScale') {
        this.totalRealName = value.Attendance
      } else {
        this.totalRealName = value.contract
      }
    },
    getHost() {
      var hosts = window.location.host
      var protocol = document.location.protocol
      if (hosts.indexOf('localhost') != -1) {
        this.host = protocol + '//' + hosts + '/static/'
      } else {
        // if(this.isXSBNUser()) {
        //     this.host = "xsbn/static/"
        // }else {
        this.host = window.location.pathname + 'static/'
        // }
      }
    },
  },
}
</script>

<style lang="less" scoped>
.chartTitle {
  height: 16px;
  line-height: 16px;
  border-left: 3px solid #009588;
  padding-left: 8px;
  left: 10px;
  position: absolute;
  font-size: 16px;
  color: #ffffff;
  top: 8px;
}
.contentBottom {
  height: calc(50%);
  .el-row {
    height: calc(100%);
    .el-col {
      height: calc(100%);
    }
  }
}
.commonHeightBottom {
  height: calc(100%);
  margin-top: 10px;
}
.commonHeight {
  height: calc(100%);
  margin-top: 10px;
}
.contentBg {
  background: rgba(29, 65, 96, 0.5);
}
.fontColor {
  color: #fff;
}
.comFontSize {
  font-size: 16px;
}
.comSinFontSize {
  font-size: 14px;
}
.maxNum {
  font-size: 20px;
}
.minNum {
  font-size: 12px;
}
.sinFontColor {
  // color:#7193B2;
  color: #fff;
}
.numColor {
  color: #53ffac;
}
.TitleStyle {
  padding: 2.5% 0;
  font-weight: bold;
  // padding-left: 10px;
  &::before {
    content: '';
    background: #265faa;
    display: inline-block;
    width: 3px;
    height: 16px;
    margin-right: 8px;
    margin-left: 10px;
    position: relative;
    top: 2px;
  }
}
.contentBoxTop {
  height: 118px;
  .markStyle {
    position: absolute;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    top: 50%;
    transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -o-transform: translateY(-50%);
  }
  P {
    position: relative;
    margin-bottom: 16px;
  }
  .contentBox {
    text-align: center;
  }
  .markTitle {
    margin-left: 10px;
  }
}
.salaryBox {
  padding-left: 20px;
}
.salaryDataBox {
  text-align: right;
  padding-right: 20px;
}
.markBg {
  background: #3f7eef;
}
.markBgO {
  background: #26bbff;
}
.markBgT {
  background: #52ffac;
}
.RealNameBox {
  width: 136px;
  margin-left: 21px;
  background: #1c405b;
  padding: 3px 11px;
}
.realNameProportion {
  margin-left: 21px;
  position: relative;
}
.mLTen {
  margin-left: 10px;
}
.monthDataPic {
  height: calc(95% - 30px);
}
.monthStyleBox {
  position: relative;
  .filterMonthData {
    position: absolute;
    left: 8px;
    z-index: 1000;
  }
}
.projectDataBox {
  height: calc(85% - 30px);
  overflow: hidden;
  overflow-y: auto;
  margin-top: 10px;
}
.porjectNum {
  color: #ffffff;
  text-align: right;
  margin-right: 10px;
}
.porjectNumData {
  position: relative;
  margin-top: 5px;
  .cityStyle {
    position: absolute;
    margin-left: 26px;
    width: 50px;
    overflow: hidden;
    height: 15px;
  }
  .porjectNumProgress {
    width: 68%;
    margin-left: 80px;
  }
  .projectData {
    position: absolute;
    right: 26px;
    top: 0;
    color: #6defff;
  }
}
/deep/.el-radio {
  margin-right: 8px !important;
  .el-radio__label {
    padding-left: 5px !important;
    font-size: 12px;
    color: #7a8b9b;
  }
  .el-radio__inner {
    width: 12px;
    height: 12px;
    border: 1px solid #7a8b9b;
    background-color: rgba(29, 65, 96, 0.5);
    &::after {
      background-color: #53ffac;
    }
  }
  .el-radio__input.is-checked .el-radio__inner {
    border-color: #53ffac;
    background: rgba(29, 65, 96, 0);
  }
  .el-radio__input.is-checked + .el-radio__label {
    color: #53ffac;
  }
}
/deep/.el-progress__text {
  color: #6defff;
  font-size: 12px;
}
.mapBg {
  background: #31546b;
  position: relative;
}
.mapSty {
  height: calc(100% - 10px);
}
.titleTip {
  color: #7a8b9b;
}
.realNameBox {
  z-index: 2005;
  margin-top: 9px;
  /deep/ .el-select {
    height: 28px;
    line-height: 28px;
    margin-right: 10px;
    margin-bottom: 6px;
    .el-input {
      height: 28px;
      line-height: 28px;
      .el-input__inner {
        background-color: #1c405b;
        border-color: transparent;
        height: 28px;
        line-height: 28px;
        width: 172px;
      }
    }
  }
  /deep/.el-input__suffix {
    top: 0 !important;
    height: 28px !important;
    line-height: 28px;
    .el-input__icon {
      height: 28px !important;
      line-height: 28px;
    }
  }
}
/deep/.el-progress {
  line-height: 0.5 !important;
  .el-progress__text {
    font-size: 12px !important;
  }
}
@media all and (min-height: 700px) and (max-height: 800px) {
  .commonHeightTop {
    margin-top: 10 !important;
  }
  .TitleStyle {
    padding: 5px 10 !important;
  }
  .comFontSize {
    font-size: 12px !important;
  }
  .TitleStyle {
    &::before {
      height: 10px !important;
    }
  }
  .contentBoxTop {
    p {
      margin-bottom: 3% !important;
    }
  }
  .projectFigure {
    .statistic {
      height: 180px !important;
      top: -35 !important;
    }
  }
  .maxNum {
    font-size: 14px !important;
  }
  .realNameProportion {
    margin-top: 0 !important;
  }
  .comSinFontSize {
    font-size: 12px !important;
  }
}
@media screen and (max-width: 1366px) and (max-height: 768px) {
  .commonHeightTop {
    margin-top: 10 !important;
  }
  .TitleStyle {
    padding: 5px 0 !important;
  }
  .comFontSize {
    font-size: 12px !important;
  }
  .TitleStyle {
    &::before {
      height: 10px !important;
    }
  }
  .contentBoxTop {
    p {
      margin-bottom: 1% !important;
    }
  }
  .projectFigure {
    .statistic {
      height: 180px !important;
      top: -35 !important;
    }
  }
  .maxNum {
    font-size: 14px !important;
  }
  .realNameProportion {
    margin-top: 0 !important;
  }
  .comSinFontSize {
    font-size: 12px !important;
  }
}
@media screen and (min-width: 1600px) and (max-width: 1680px) and (min-height: 1024px) and (max-height: 1050px) {
}
@media only screen and (max-width: 1680px) {
  .projectDataBox {
    height: calc(78% - 30px) !important;
  }
}
/deep/ .el-select .el-input .el-input__inner {
  color: #ffffff;
  font-size: 12px;
}
/deep/ .el-progress-bar__outer {
  background-color: #1c405b;
}
</style>
